<script>
  import { computed, defineComponent } from '@vue/composition-api';

  const KtButton = defineComponent({
    name: 'KtButton',
    props: {
      type: {
        type: String,
        default: () => 'info',
      },
      disabled: {
        type: Boolean,
        default: () => false,
      },
      danger: {
        type: Boolean,
        default: () => false,
      },
    },
    setup(props, { emit }) {
      const buttonTypeClass = computed(() => {
        let btnClass = 'default-button';
        switch (props.type) {
        case 'primary': {
          btnClass = 'primary-button';
          break;
        }
        case 'info': {
          btnClass = 'info-button';
          break;
        }
        default: break;
        }
        return btnClass;
      });

      const handleClick = () => {
        if (props.disabled) return;
        emit('click');
      };

      return {
        buttonTypeClass,
        handleClick,
      };
    },
  });

  export default KtButton;
</script>

<template>
  <span
    v-if="type === 'text'"
    class="kt-button text-button"
    :danger="danger"
    :disabled="disabled"
  >
    <slot />
  </span>
  <button
    v-else
    class="kt-button basic-button hover:opacity-70"
    :class="buttonTypeClass"
    :disabled="disabled"
    :danger="danger"
    @click="handleClick"
  >
    <span>
      <slot />
    </span>
  </button>
</template>

<style>
.kt-button {
  @apply inline-block whitespace-nowrap text-center select-none px-4 py-1.5
}
.basic-button {
  @apply rounded-md;
}

.primary-button {
  @apply bg-main-1 border border-solid border-main-1 text-white shadow-btn;
}

.info-button {
  @apply bg-white text-main-1 border border-solid border-main-1;
}

.text-button {
  @apply cursor-pointer;
}

.primary-button[danger] {
  background: var(--warnColor1);
  border-color: var(--warnColor1);
}

.info-button[danger] {
  border-color: var(--warnColor1);
  color: var(--warnColor1);
}
.text-button[danger] {
  color: var(--warnColor1);
}

.basic-button[disabled] {
  color: #c9c9c9 !important;
  background: #f5f5f5 !important;
  border-color: #D9D9D9 !important;
  opacity: 1 !important;
  box-shadow: none;
  text-shadow: none;
  cursor: not-allowed;
}
.text-button[disabled] {
  color: #c9c9c9 !important;
  box-shadow: none;
  text-shadow: none;
  cursor: not-allowed;
}
</style>
